{% extends "base.html" %}
{% block title %}

{% endblock %}

{% block ext_css %}
    <style>
    .profile{
        background: url("/static/img/bg3.png#234") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        padding:10vw;
    }
    .no_border{
        border-color: crimson;
        border-left-width: 0;
        border-right-width: 0;
        border-top-width: 0;
        display: block;
        width: 100%;
        background-color:rgba(0, 0, 0, 0.0);
        border-radius: 0;
    }
    </style>

{% endblock %}

{% block ext_script %}
    <script>
    $(function () {
        $(".update_form").submit(function (e) {

            const data = $(this).serializeArray();
            if (data[1].value.length!==18 ){
                e.preventDefault();
                alert('身份证号码不符合规则');
                return
            }
        })
    })
    </script>

{% endblock %}

{% block content %}
    <div class="viewport profile" style="padding:4vw;">
        <div id="accordion">
          {% for member in members %}
          <div class="card">
            <div class="card-header" id="heading_{{ member.id }}">
              <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse_{{ member.id }}" aria-expanded="false" aria-controls="collapse_{{ member.id }}">
                  {{ member.mobile }} 姓名:{{ member.realName or "未设置" }}[点击展开]
                </button>
              </h5>
            </div>

            <div id="collapse_{{ member.id }}" class="collapse" aria-labelledby="heading_{{ member.id }}" data-parent="#accordion">
              <div class="card-body">
                 <form class="update_form" method="POST" style="width: 90%; padding:5vw; text-align: left;margin:auto" action="{{ url_for('www.save_profile', member_id=member.id) }}">
                  <div class="form-group">
                    <label for="realName">真实姓名</label>
                    <input name="realName" type="text" class="no_border" id="realName" required value="{{ member.realName or '' }}">
                  </div>
                  <div class="form-group">
                    <label for="idNo">身份证号码</label>
                    <input name="idNo" type="text" class="no_border" id="idNo" required value="{{ member.idNo or '' }}">
                  </div>
                  <div class="form-group">
                    <label for="address">通讯地址</label>
                    <input name="address" type="text" class="no_border" id="address" required value="{{ member.address or '' }}">
                  </div>
                  <div style="text-align: center; padding: 5vw">
                  <button type="submit" class="btn btn-danger" style="width:60%">更新</button>
                  </div>
                 </form>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
    </div>



{% endblock %}